<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="/webix/webix.css" type="text/css">
    <script src="/webix/webix.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
    webix.ui({
        width:500,
        rows: [
            { view:"toolbar", elements:[
                { view:"button", value:"Add",    width:100},
                { view:"button", value:"Delete", width:100 }
            ]},
            { height:120, cols:[
                {view:"form", elements:[
                    { view:"text", placeholder:"Title"},
                    { view:"text", placeholder:"Year"}
                ]},
                {
                    view:"list",
                    template:"#title# - #year#", // which data to show
                    select:true, //enables selection
                    height:400,
                    data: [
                        { id:1, title:"The Shawshank Redemption", year:1994},
                        { id:2, title:"The Godfather", year:1972},
                        { id:3, title:"The Godfather: Part II", year:1974},
                        { id:4, title:"The Good, the Bad and the Ugly", year:1966},
                        { id:5, title:"My Fair Lady", year:1964},
                        { id:6, title:"12 Angry Men", year:1957}
                    ]
                }
            ]}
        ]
    });
</script>
</body>
</html>